<template>
  <a-card
    class="group hover:shadow-card-hover transition-custom overflow-hidden cursor-pointer"
    bordered="false"
    @click="handleClick"

  >
    <!-- 文章封面图 -->
    <template v-if="article.coverImage" #cover>

      <div style="position: relative; display: flex; justify-content: center; margin-top: 10px;">
        <img
          :src="article.coverImage"
          :alt="article.title"
          style="width: 100%; height: 256px; object-fit: cover;"
          class="w-full h-64 object-cover group-hover:scale-105 transition-custom duration-500"
        >
        <div v-if="article.isNew" class="absolute top-4 right-4">
          <a-tag color="blue" class="text-xs font-medium">新</a-tag>
        </div>
      </div>
    </template>

    <!-- 文章内容 -->
    <a-card-meta>
      <template #avatar>
        <a-avatar
          v-if="article.avatar"
          :src="article.avatar"
          :size="40"
          class="flex-shrink-0"
        />
      </template>

      <template #title>
        <div class="flex justify-between items-center">
          <span class="text-neutral-600 text-sm">{{ article.username }} • {{ article.updateTime }}</span>
          <div class="flex items-center space-x-2">
            <a-button
              shape="circle"
              size="small"
              type="text"
              @click.stop="toggleStar"
            >
            </a-button>

          </div>
        </div>
      </template>

      <template #description>

        <div class="space-y-3">
          <!-- 文章标题 -->
          <h3 class="text-xl font-bold text-neutral-900 line-clamp-2 group-hover:text-primary transition-colors">
            {{ article.title }}
          </h3>

          <!-- 文章摘要 -->
          <p class="text-neutral-600 line-clamp-3 leading-relaxed">
            {{ article.content }}
          </p>

          <!-- 标签 -->
          <div class="flex flex-wrap gap-2">
            <!-- <a-tag
              v-for="tag in article.tags.slice(0, 3)"
              :key="tag.name"
              :class="tag.color"
              size="small"
            >
              {{ tag.name }}
            </a-tag> -->
            <!-- <span v-if="article.tags.length > 3" class="text-neutral-400 text-xs">
              +{{ article.tags.length - 3 }}
            </span> -->
          </div>

          <!-- 统计信息 -->
          <div class="flex items-center justify-between text-neutral-500 text-sm pt-2 border-t border-neutral-100 flex-nowrap" style="margin-bottom: 15PX;">
            <div class="flex items-center space-x-4" style="display: flex; justify-content: left;">
              <div class="flex items-center"  >
                <EyeOutlined class="mr-1"/>
                <span >{{ article.views }}</span>
              </div>
              <div class="flex items-center" style="margin: 0 10PX;">
                <CommentOutlined class="mr-1" />
                <span>{{ article.comments }}</span>
              </div>
              <div class="flex items-center">
                <HeartOutlined class="mr-1" />
                <span>{{ article.likes }}</span>
              </div>
            </div>

          </div>
        </div>
      </template>
    </a-card-meta>

    <!-- 操作按钮 -->
    <div class="mt-4 pt-4 border-t border-neutral-100">
      <a-button
        block
        shape="round"
        type="primary"
        @click.stop="handleReadMore"
        class="h-10"
      >
        <component :is="article.actionIcon" class="mr-2" />
        {{ article.actionText || '阅读全文' }}
      </a-button>
    </div>
  </a-card>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import {
  EyeOutlined,
  CommentOutlined,
  HeartOutlined
} from '@ant-design/icons-vue'
//子组件使用post的状态机
import { storeToRefs } from 'pinia'
import { usePostStore } from '@/stores/postStore'
const postStore = usePostStore()
const { postList, total } = storeToRefs(postStore)




const props = defineProps({
  article: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['click', 'star-toggle', 'read-more'])

const handleClick = () => {
  emit('click', props.article.id)
}

const toggleStar = () => {
  emit('star-toggle', props.article.id)
  message.success(props.article.starred ? '已取消收藏' : '已添加到收藏')
}

const handleReadMore = () => {
  emit('read-more', props.article.id)
}
</script>

<style scoped>
.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-card-hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.text-primary {
  color: #FF424D;
}

.text-neutral-400 {
  color: #9CA3AF;
}

.text-neutral-500 {
  color: #6B7280;
}

.text-neutral-600 {
  color: #4B5563;
}

.text-neutral-900 {
  color: #111827;
}

.border-neutral-100 {
  border-color: #F3F4F6;
}

/* 文本截断样式 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 悬停效果 */
.group:hover .group-hover\:text-primary {
  color: #FF424D;
}
</style>
